<template>
  <n-modal
    v-model:show="getProps.modalData.show"
    class="custom-card"
    preset="card"
    :style="{ width: '800px' }"
    title="创意基本信息"
    :bordered="false"
    :segmented="{
      content: true,
      footer: true
    }"
    :mask-closable="false"
  >
    <n-scrollbar v-if="detail" style="max-height: 600px">
      <div class="ad-modal-content">
        <n-h3>基础信息</n-h3>
        <div class="ad-modal-content-item">
          <div class="p1">创意名称</div>
          <div class="p2">{{ detail.dynamicCreativeName }}</div>
        </div>
        <div class="ad-modal-content-item">
          <div class="p1">创意素材</div>
          <div class="p2">
            <div class="video-image">
              <div v-if="detail.media?.type === 2" class="video-image">
                <video :src="detail.media?.url" :controls="true" style="width: 100%; max-height: 300px" />
              </div>
              <div v-else style="text-align: center" class="video-image">
                <n-image
                  height="300"
                  :src="detail.media?.url"
                  :previewed-img-props="{ style: {} }"
                  fallback-src="https://alicdn.itaored.com/test/feima-uploaded/images/a8/1f/a81f32e133c829e8e3cdfe1784f8a4ad.png?x-oss-process=image/resize,w_150/quality,q_94/format,webp"
                  object-fit="contain"
                />
              </div>
            </div>
          </div>
        </div>
        <div class="ad-modal-content-item">
          <div class="p1">创意ID</div>
          <div class="p2">{{ detail.dynamicCreativeId }}</div>
        </div>
        <div class="ad-modal-content-item">
          <div class="p1">操作状态</div>
          <div class="p2">{{ detail.configuredStatus }}</div>
        </div>
        <div class="ad-modal-content-item">
          <div class="p1">创意状态</div>
          <div class="p2">{{ detail.systemStatus }}</div>
        </div>
        <div class="ad-modal-content-item">
          <div class="p1">创建时间</div>
          <div class="p2">{{ detail.createTime }}</div>
        </div>
      </div>
    </n-scrollbar>
  </n-modal>
</template>

<script setup lang="ts">
  import { computed, h, onMounted, reactive, ref, watch } from 'vue'
  import { XButton } from '@/components'

  import { NModal, NH3, NSpace, NScrollbar, useMessage, NImage } from 'naive-ui'
  import { useStore } from '@/store'
  import { useRoute } from 'vue-router'
  import { defineProps, defineEmits } from 'vue'
  import XDataTable from '@/components/x-data-table/index.vue'
  import { formatDate } from '@/utils'
  import { gdtMediaDetail } from '@/api/intelligent'
  const route = useRoute()
  const emit = defineEmits(['success'])
  const message = useMessage()
  const store = useStore()
  const accountCode = computed(() => {
    return route.query.accountCode
  })
  const props = defineProps({
    modalData: {
      type: Object,
      default: () => ({})
    }
  })
  const getProps = reactive(props)
  const detail = ref({})
  onMounted(() => {
    getDetail()
  })
  const getDetail = () => {
    store
      .dispatch('intelligent/gdtMediaDetail', {
        accountCode: getProps.modalData.row.accountCode,
        dynamicCreativeId: getProps.modalData.row.dynamicCreativeId
      })
      .then((res) => {
        detail.value = res.data || null
      })
  }
</script>

<style scoped lang="scss">
  .ad-modal-content {
    &-item {
      display: flex;
      margin-bottom: 8px;
      .p1 {
        min-width: 120px;
      }
      .p2 {
        .video-image {
          max-height: 300px;
        }
      }
    }
  }
</style>
